<template>
	<el-dialog title="联通性测试" :visible.sync="dialogVisible" width="800" @close="handleClose"
		:close-on-click-modal="false">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>联通性测试</span>
		</div>

		<div class="smp-search">
			<el-form :inline="false" label-width="100px" size="mini"  ref="form" :model="form" :rules="rules">

				<el-row>
					<el-col :span="24">
						<el-form-item label="ESB环境:">
							<el-select v-model="form.esbAddr" style="width: 100%" placeholder="环境类型" disabled>
								<!-- <el-option v-for="item in dict('SMP0016')" :key="item.itemCode" :label="item.itemName" :value="item.itemCode"></el-option> -->
								<el-option v-for="item in esbEnvironmentList" :key="item.ip" :label="item.ip+'('+dictName(item.esbFlg,'SMP0031')+')'" :value="item.ip"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :span="24">
						<el-form-item label="目标系统环境:" >
							<el-input v-model="form.systemCurrentAddr" disabled></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="24">
						<el-form-item label="命令:" prop="command">
							<el-select v-model="form.command" style="width: 100%" placeholder="命令" :disabled = "this.result == '' ? false : true">
								<el-option v-for="item in dict('SMP0029')" :key="item.itemCode" :label="item.itemName"
									:value="item.itemCode">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="24">
						<el-form-item label="目标端口:" prop="port" v-if="form.command == '02'">
							<el-input v-model="form.port" placeholder="请输入目标端口"></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :span="24">
						<el-form-item label="执行结果:" >
							<div class="article">
								<!-- vue展示markdown内容,v-highlight自定义指令 -->
								<div v-highlight v-html="result" class="markdown-body" id="content"></div>	
							</div>
							</el-form-item>
					
					</el-col>
				</el-row>

				
			</el-form>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini"  type="primary" @click="execute">执行</el-button>
		</span>
	</el-dialog>
</template>

<script>
	"use strict";
	import {
		executeCommand,getEsbEnvironmentByEsbFlg
	} from '@/api/environment.js';
	export default {
		
		data() {
			return {
				esbEnvironmentList: [],
				dialogVisible: false,
				result: this.$marked('```shell\n \n \n \n```'),
				rules: {
					command: [{
						required: true,
						message: "命令不能为空",
						trigger: ['blur', 'change']
					}],
					port: [{
						required: true,
						message: "端口不能为空",
						trigger: ['blur', 'change']
					}]
				},
				form: {
					systemCurrentAddr: '',
					esbAddr: '',
					port: '',
					command: ''
				},

			};
		},

		created() {
			this.getEsbEnvironmentList();
		},
		  

		methods: {
			
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},
			
			execute() {
				
					this.$refs["form"].validate(valid => {
						if (valid) {
							const loading = this.$loading({
								lock:true,
								text:'网络测试中，请稍后',
								spinner:'el-icon-loading'
							});
							executeCommand(this.form).then(response => {
								if(response.data.code == '0000'){
									let content ='``` shell\n'+ response.data.message+'\n```';
										
									// 调用marked()方法，将markdown转换成html
									this.result= this.$marked(content);
									loading.close();
									this.initflg = true;
								}else{
									this.$message({
						duration:5000,
										type: 'error',
										message: response.data.message
									});
									loading.close();
									this.initflg = true;
								}
							}).catch(error => {
								loading.close();
								this.$message({
						duration:5000,									type: 'error',
									message: '联通性测试失败！'
								});
								this.form = {};
								this.$refs["form"].resetFields();
								this.dialogVisible = false;
							});
						}
					})
			},

			showDialog(row) {
				this.dialogVisible = true;
				if(row.requireType == '02'){
					this.form.systemCurrentAddr = row.systemTargetAddr;
				}else{
					this.form.systemCurrentAddr = row.systemCurrentAddr;
				};
				this.form.esbAddr = row.esbAddr;
			},

			handleClose() {
				this.$refs["form"].resetFields();
				this.result = marked('```shell\n \n \n \n```');
				this.dialogVisible = false;
			}


		},

	}
</script>

<style scoped>
	.article{
		margin-top: -11px;
		margin-left: 0px;
		padding-left: 0px;
	}
	
</style>
